<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta charset="utf-8" />
	<title></title>
	<link href="../css/bootstrap.min.css" rel="stylesheet">
	<link href="../css/bootstrap-select.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="../css/bootstrap-treeview.min.css">
	<link href="../css/font-awesome.min.css" rel="stylesheet">
	<link href="../css/JyyCommon.css" rel="stylesheet">
	<link href="../css/JyyTable.css" rel="stylesheet">
	<link href="../css/JyyTree.css" rel="stylesheet">
	<link href="../css/JyyMsgBox.css" rel="stylesheet">
	<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
	<script type="text/javascript" src="../js/jquery.form.min.js"></script> 
	<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-paginator.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-treeview.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-select.js"></script>
	<script type="text/javascript" src="../js/jyy_modal.js"></script>
	<script type="text/javascript" src="../js/JyyCommon.js"></script>
	<script type="text/javascript" src="../js/JyyTable.js"></script>
	<script type="text/javascript" src="../js/JyyTree.js"></script>
	<script type="text/javascript" src="../js/JyyMsgBox.js"></script>
	<script type="text/javascript" src="../js/JyyLoading.js"></script>
	<script type="text/javascript" src="../js/echarts.js"></script>
	<style>
	.heidenbt{
		display: none
	}
	.echarts{
		width: 100%;
		height:330px;
	}
	.control-label{
		float: left;
		margin-top: 7px;
		padding: 0px;
		width: 80px;
		font-weight: normal;
		text-align: right;
		margin-right: 15px;
	}
</style>
	<script type="text/javascript">
		var tree = null;
		var projectId =  getQueryString("projectId")||'88888888888';
		$(function(){
			getSelectDatas();
			selectData();
		});
		function selectData(){
			var timeSel =  $('#timeSel').val(); 
			var daytype = $("input[name=daytype]:checked").val();
			var sectionSel =  $('#sectionSel').val(); 
			if(JyyCommon.isEmpty(timeSel)){
				JyyMsgBox.alert({ title:"警告", message:"[频度]不可为空",type:"warning"}).on(function (e) {});
				return false;
			}
			if(JyyCommon.isEmpty(daytype)){
				JyyMsgBox.alert({ title:"警告", message:"[典型日]不可为空",type:"warning"}).on(function (e) {});
				return false;
			}
			if(JyyCommon.isEmpty(sectionSel)){
				JyyMsgBox.alert({ title:"警告", message:"[断面]不可为空",type:"warning"}).on(function (e) {});
				return false;
			}
			JyyLoading.start();
			$.when(getEcahtData(timeSel, daytype,sectionSel)).done(function(echatData){
				createEchat(echatData, 0);
				$("#typicalDate").text("典型日：" + echatData.typicalDate);
				$.when(getEcahtData1(echatData.typicalDate, "selectRunPosUnitEchatData")).done(function(echatData){
					createEchat(echatData, 1);
				});
				$.when(getEcahtData1(echatData.typicalDate, "selectAbandPowerEchatData")).done(function(echatData){
					createEchat1(echatData, "abandonedPowerEchart");
				});
				$.when(getEcahtData1(echatData.typicalDate, "selectAbandRateEchatData")).done(function(echatData){
					createEchat1(echatData, "abandonedRateEchart");
				});
				JyyLoading.end();
			});
		}
		function createEchat(echartData, code) {
			var id = "";
			var yAxisName = "";
			if(code == 0) {
				id = "echarts";
				yAxisName = "MW"
			} else if(code == 1) {
				id = "unitecharts";
				yAxisName = "%"
			}
			var unitArr = ["常规火电", "启停火电", "热电","核电","抽蓄","燃油机组","储能","水电","风电","光伏","光热","区外"];
			var colorArr = ["#F01B2D", "#FF76FA", "#f076ee","#C7CEB2","#548DD4","#89A9E2","#FAC08F","#00B0F0","#92D050","#FFC000","#FFE957","#8B864E"];
			var chartDom = document.getElementById(id);
			var myChart = echarts.init(chartDom);
			var option;
			var legendData = echartData['legend'];
			var echatData = echartData['echat'];
			var seriesData = [];
			for(var j = 0;j < echatData.length;j++) {
				var seriesMap = {};
				if(echatData[j].name == "负荷") {
					seriesMap = {
						name: echatData[j].name,
						type: 'line',
					    emphasis: {
					    	focus: 'series'
					    },
                        itemStyle : {
                            normal : {
                            	color:'#000000',
                                lineStyle:{
                                    color:'#000000'  
                                }
                            }
                        },
					    data: echatData[j].seriesData
					};
				}else if(unitArr.includes(echatData[j].name)) {
					seriesMap = {
						name: echatData[j].name,
						type: 'line',
					    emphasis: {
					    	focus: 'series'
					    },
                           itemStyle : {
                               normal : {
                               	color: colorArr[unitArr.indexOf(echatData[j].name)],
                                   lineStyle:{
                                       color:colorArr[unitArr.indexOf(echatData[j].name)]
                                   }
                               }
                           },
					    data: echatData[j].seriesData
					};
					if(code == 0) {
						seriesMap.stack = "总量";
						seriesMap.areaStyle = {};
					}
				} else {
					seriesMap = {
						name: echatData[j].name,
						type: 'line',
					    emphasis: {
					    	focus: 'series'
					    },
					    data: echatData[j].seriesData
					};
					if(code == 0) {
						seriesMap.stack = "总量";
						seriesMap.areaStyle = {};
					}
				}
				seriesData.push(seriesMap);
			}
			
			option = {
			  	tooltip: {
			    	trigger: 'axis',
			    	axisPointer: {
			      		type: 'cross',
			      		label: {
			        		backgroundColor: '#6a7985'
			      		}
			    	},
			    	position: function(point, params, dom, rect, size) {
			             //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
			             var x = point[0]; //
			             var y = point[1];
			             var viewWidth = size.viewSize[0];
			             var viewHeight = size.viewSize[1];
			             var boxWidth = size.contentSize[0];
			             var boxHeight = size.contentSize[1];
			             var posX = 0; //x坐标位置
			             var posY = 0; //y坐标位置

			             if (x < boxWidth) { //左边放不开
			                 posX = 5;
			             } else { //左边放的下
			                 posX = x - boxWidth;
			             }

			             if (y < boxHeight) { //上边放不开
			                 posY = 5;
			             } else { //上边放得下
			                 posY = y - boxHeight;
			             }

			             return [posX, posY];

			         }
			  	},
			  	legend: {
			    	data: legendData
			  	},
			  	grid: {
			    	left: '3%',
			    	right: '4%',
			    	bottom: '3%',
			    	containLabel: true
			  	},
			  	xAxis: [{
			    	type: 'category',
			      	boundaryGap: false,
			      	data: ["1点","2点","3点","4点","5点","6点","7点","8点","9点","10点","11点","12点","13点","14点","15点","16点",
			      		   "17点","18点","19点","20点","21点","22点","23点","24点"]
			    }],
			  	yAxis: [{
			      	type: 'value',
			      	name: yAxisName
			    }],
			    dataZoom: {
			    	start: 0,
			        type: "inside"
			    },
			  	series: seriesData
			};
			myChart.setOption(option, true);
			window.addEventListener("resize", () => {
				if(myChart){
					myChart.resize()
				}
			})
		}

		function createEchat1(echartData, id) {
			var option = {};
			var seriesData = echartData['seriesData'];
			var yAxisName = "MW";
			var csvName = "";
			if(id == "abandonedPowerEchart") {
				csvName = "新能源弃电情况";
			} else if(id == "abandonedRateEchart") {
				csvName = "新能源弃电率";
				yAxisName = "%";
			}
			var series = [];
			for(var j = 0;j < seriesData.length;j++) {
				series.push({
					name: seriesData[j].name,
					type: 'line',
				    emphasis: {
				    	focus: 'none'
				    },
				    data: seriesData[j].series
				});
			}
			
			option = {
			  	tooltip: {
			    	trigger: 'axis',
			    	axisPointer: {
			      		type: 'cross',
			      		label: {
			        		backgroundColor: '#6a7985'
			      		}
			    	},
			    	position: function (pos, params, dom, rect, size) {
			    	      // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
			    	      var obj = {top: 60};
			    	      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 325;
			    	      return obj;
			    	}
			  	},
			  	toolbox: {
					show: true,
					right: 30,
				    itemSize: 20,
					itemGap: 12,
			        feature: {
			        	myTool: {
			        		show: true,
			        		title: "导出为Excel",
			        		icon: 'image://../images/excel.png',
			        		onclick: (o) => {
								var option = o.option;
								var dataSource = [];
								var dataType = "\uFEFF"; //解决乱码问题
								dataType += option.xAxis[0].name+",";  //添加表格的头
								if(option.series.length > 0) {
									for(var i = 0;i < option.series.length;i++) {
										dataType += option.series[i].name+","
									}
									dataType = dataType.substr(0, dataType.length-1)
								}
								dataType += '\n'; // 以上是导出的Excel文件头部

								// 从dataSource中取出数据存入数据源（dataType）
								dataSource.map(item => dataType += `${item.join(',')}\n`); 
								// 使用Blob，获得二进制实例
								const csvData = new Blob([dataType], {
								    type: 'text/csv'
								});
								// 创建a标签
								const _a = document.createElement('a');
								_a.href = URL.createObjectURL(csvData);
								_a.target = '_blank';
								_a.download = csvName+`.csv`;
								document.body.appendChild(_a);
								_a.click();
								document.body.removeChild(_a);
		                   	},
			        	},
			        	saveAsImage: {name:csvName,icon:"image://../images/downpic.png"}
			        }
			    },
			  	legend: { },
			  	grid: {
			    	left: '3%',
			    	right: '4%',
			    	bottom: '5%',
			    	containLabel: true
			  	},
			  	xAxis: [{
			  		name :'时刻',
			    	type: 'category',
			      	boundaryGap: false,
			      	data: echartData['xAxisData']
			    }],
			  	yAxis: [{
			      	type: 'value',
			      	name: yAxisName
			    }],
			  	series: series
			};
			var chartDom = document.getElementById(id);
			var myChart = echarts.init(chartDom);
			myChart.clear();
			myChart.setOption(option, true);
			window.addEventListener("resize", () => {
				if(myChart){
					myChart.resize()
				}
			})
		}
		
		//查询
		function select(){
			selectData();
		}
		
		function getQueryString (name){
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			return r ? unescape(r[2]) : null;
		}

		function getSelectDatas(){
			$.ajax({
				url: "../g/service/Sample/getSelectDatas",
				type:'POST',
				cache:false,
				async:false,
				dataType: "json",
				contentType:"application/json",
				data:JSON.stringify({ projectId : projectId}),
	            success:function(data){
					var content = '';
					$.each(data.timeSel,function(i,n){
						content += "<option value='" + n.code + "'>"+ n.name+"</option>";
					});
					$("#timeSel").append(content);
					$("#timeSel").change(function(){
						if(this.value == 0){
							$("#sectionSel").attr("disabled", false)
							$("#radio10").attr("disabled", false)
							$("#radio11").attr("disabled", false)
							$("#radio12").attr("disabled", false)
						} else {
							var daytype = $("input[name=daytype]:checked").val();
							if(daytype == 10 || daytype == 11 || daytype == 12) {
								$("input[name=daytype][value=8]").prop("checked",true);
							}
							$("#sectionSel").attr("disabled", true)
							$("#radio10").attr("disabled", true)
							$("#radio11").attr("disabled", true)
							$("#radio12").attr("disabled", true)
						}
					})
					var content1 = '';
					$.each(data.sectionSel,function(i,n){
						content1 += "<option value='" + n.name + "'>"+ n.name+"</option>";
					});
					$("#sectionSel").append(content1);
	            }
			});
		}
		
		function getEcahtData(time, daytype, section){
			var res = $.ajax({
				url: "../g/service/Sample/selectRunPosEchatData",
				type:'POST',
				cache:false,
				async:false,
				dataType: "json",
				data:JSON.stringify({ projectId : projectId, classType : time, daytype : daytype,section:section }),
				contentType:"application/json",
	            success:function(data){
					return data;
	            }
			});
			return res;
		}
		function getEcahtData1(typeicalDay, method){
			var res = $.ajax({
				url: "../g/service/Sample/" + method,
				type:'POST',
				cache:false,
				async:false,
				dataType: "json",
				data:JSON.stringify({ projectId : projectId, typeicalDay : typeicalDay }),
				contentType:"application/json",
	            success:function(data){
					return data;
	            }
			});
			return res;
		}
		function invoke(url, args, callback){
			var r, op = {
					url: '../g/service/Sample/' + url,
					type:'POST',
					cache:false,
					async:true,
					dataType:'json',
					data:args ? JSON.stringify(args) : null,
					contentType:"application/json"
				};
			if(typeof callback == 'function'){
				op.success = function(data){
					if(data.error)return alert(data.error);
					callback(data);
				}
			} else {
				op.async = false;
				op.success = function(data){
					r = data
				};
			}
			$.ajax(op);
			if(r)if(r.error){
				alert(r.error);
				return null;
			}
			return r;
		};
	</script>
<style type="text/css">
	body, html{
		width: 100%;
		height: 100%;
	}
	.selBtn {
		float:left;
		margin-left:20px;
		height:30px;
		width:70px;
		background-color:#1890FF;
		border-radius:5px;
		border: 0px;
		color:white;
	}
	.selBtn:hover {
		background-color: #00BFFF;
	}
	.shadow {
		box-shadow: 0 0.05rem 1rem rgba(0,0,0,0.15)!important;
		border-radius: 0.25rem!important;
		margin-left: 20px;
		margin-bottom: 20px;
	}
</style>
</head>
<body>
<div style="overflow-y: auto;width: 100%;height: 100%;">
	<div style="height: 160px;">
		<div class="col-md-12" style="margin-top: 10px;">
			<label  class="control-label col-sm-1" style="">频度</label>
			<select class="form-control" id="timeSel" style="float: left;margin-top: -3px;padding: 0px;width: 120px;font-weight: normal;"></select>
			
			<button class="selBtn" onclick=select()>查询</button>
		</div>
		<div class="col-md-12" style="margin-top: 10px;">
			<label class="control-label col-sm-1" style="">负荷</label>
			<input id="radio8" type="radio" value="8" name="daytype" checked="checked" style="margin: 7px 0px 0px 7px;">
			<label style="width: 100px;font-weight: normal;margin: 5px 10px 0px 0px;" for="radio8"> 最大负荷日</label>
			<input id="radio9" type="radio" value="9" name="daytype">
			<label style="width: 100px;font-weight: normal;margin: 5px 10px 0px 0px;" for="radio9"> 最大峰谷差日</label>
		</div>
		<div class="col-md-12" style="margin-top: 10px;">
			<label class="control-label col-sm-1" style="">新能源</label>
			<input id="radio1" type="radio" value="1" name="daytype" style="margin: 7px 0px 0px 7px;">
			<label style="width: 100px;font-weight: normal;margin: 5px 10px 0px 0px;" for="radio1"> 最大风电出力</label>
			<input id="radio2" type="radio" value="2" name="daytype">
			<label style="width: 100px;font-weight: normal;margin: 5px 10px 0px 0px;" for="radio2"> 最大光伏出力</label>
			<input id="radio3" type="radio" value="3" name="daytype">
			<label style="width: 100px;font-weight: normal;margin: 5px 10px 0px 0px;" for="radio3"> 新能源最大出力</label>
			<input id="radio4" type="radio" value="4" name="daytype">
			<label style="width: 100px;font-weight: normal;margin: 5px 10px 0px 0px;" for="radio4"> 新能源最小出力</label>
			<input id="radio5" type="radio" value="5" name="daytype">
			<label style="width: 100px;font-weight: normal;margin: 5px 10px 0px 0px;" for="radio5"> 弃电量最大</label>
			<input id="radio6" type="radio" value="6" name="daytype">
			<label style="width: 100px;font-weight: normal;margin: 5px 10px 0px 0px;" for="radio6"> 弃电功率最大</label>
			<input id="radio7" type="radio" value="7" name="daytype">
			<label style="width: 100px;font-weight: normal;margin: 5px 10px 0px 0px;" for="radio7"> 新能源最大渗透日</label>
		</div>
		<div class="col-md-12" style="margin-top: 10px;">
			<label class="control-label col-sm-1" style="">断面潮流</label>
			<select class="form-control" id="sectionSel" style="float: left;margin-top: -3px;padding: 0px;width: 150px;font-weight: normal;"></select>
			<input id="radio10" type="radio" value="10" name="daytype" style="margin: 7px 0px 0px 7px;">
			<label style="width: 100px;font-weight: normal;margin: 5px 10px 0px 0px;" for="radio10"> 最大潮流时刻</label>
			<input id="radio11" type="radio" value="11" name="daytype">
			<label style="width: 100px;font-weight: normal;margin: 5px 10px 0px 0px;" for="radio11"> 最小潮流时刻</label>
			<input id="radio12" type="radio" value="12" name="daytype">
			<label style="width: 100px;font-weight: normal;margin: 5px 10px 0px 0px;" for="radio12"> 最大峰谷差日</label>
		</div>
	</div>
	<div class="shadow" style="width: calc(100% - 40px);min-height: 410px;margin-top: 10px;">
		<p style="padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">系统工作位置图</span>
		</p>
		<div id="typicalDate" style="width: 200px;height: 24px;float: right;font-size: 15px;"></div>
		<div id="echarts" style="width: 100%;height: 330px;margin-top: 35px;"></div>
	</div>
	<div class="shadow" style="width: calc(100% - 40px);min-height: 410px;margin-top: 10px;">
		<p style="padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">机组出力率</span>
		</p>
		<div id="typicalDate" style="width: 200px;height: 24px;float: right;font-size: 15px;"></div>
		<div id="unitecharts" style="width: 100%;height: 330px;margin-top: 35px;"></div>
	</div>
	<div class="shadow" style="width: calc(100% - 40px);min-height: 450px;position: relative;">
		<p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">新能源弃电情况</span>
		</p>
		<div id="abandonedPowerEchart" style="width: 100%;height: 400px;margin-top: 25px;"></div>
	</div>
	<div class="shadow" style="width: calc(100% - 40px);min-height: 450px;position: relative;">
		<p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">新能源弃电率</span>
		</p>
		<div id="abandonedRateEchart" style="width: 100%;height: 400px;margin-top: 25px;"></div>
	</div>
</div>
</body>
</html>